import { BasicColumn, BasicTable, FormSchema, TableAction, useTable } from "@/components/Table";
import CreateAndUpdata from "./components/createAndUpdata";
import { useDrawer } from "@/components/Drawer";
import { useTranslation } from "react-i18next";
import { IconEnum } from "@/enums/appEnum";
import { drugInfoApi } from "@/api/erp/drug/drugCatalogue";

const index = () => {
	const { t } = useTranslation();
	const en_vi = "MedicalExamination.prescribe";
	const schemas: FormSchema[] = [
		{
			label: t(`${en_vi}.drugName`),
			field: "drugName",
			component: "Input"
		}
	];
	const columns: BasicColumn[] = [
		{
			title: t(`${en_vi}.drugCode`),
			dataIndex: "drugId"
		},
		{
			title: t(`${en_vi}.drugName`),
			dataIndex: "drugName"
		},
		{
			title: t(`${en_vi}.drugBarcode`),
			dataIndex: "barCode"
		},
		{
			title: t(`${en_vi}.drugCategoryCode`),
			dataIndex: "drugCats"
		},
		{
			title: t(`${en_vi}.activeIngredients`),
			dataIndex: "activeIngre"
		},
		{
			title: t(`${en_vi}.sideEffects`),
			dataIndex: "sideEffects"
		},
		{
			title: t(`${en_vi}.specifications`),
			dataIndex: "drugSpec"
		},
		{
			title: t(`${en_vi}.storageConditions`),
			dataIndex: "storageCond"
		},
		{
			title: t(`${en_vi}.remarks`),
			dataIndex: "remark"
		},
		{
			title: t(`${en_vi}.drugInteractions`),
			dataIndex: "drugAds"
		},
		{
			title: t(`${en_vi}.weightKg`),
			dataIndex: "weight"
		},
		{
			title: t(`${en_vi}.purchasePrice`),
			dataIndex: "purPrice"
		},
		{
			title: t(`${en_vi}.sellingPrice`),
			dataIndex: "salePrice"
		},
		{
			title: t(`erp.warehouseGroupType.operations`),
			fixed: "right",
			width: 200,
			render: (_: any, record: any) => (
				<TableAction
					actions={[
						{
							icon: IconEnum.EDIT,
							label: t("felix_ui.edit"),
							onClick: updateFn(record)
						}
					]}
				></TableAction>
			)
		}
	];
	const [registerTable, { reload }] = useTable({
		api: drugInfoApi.drugsList,
		columns,
		useSearchForm: true,
		formConfig: {
			labelWidth: 120,
			schemas,
			showActionButtonGroup: true,
			showAdvancedButton: false,
			baseColProps: { span: 6 },
			actionColOptions: { span: 24 }
		},
		bordered: true
	});
	const [registerDrawer, { openDrawer }] = useDrawer();
	const updateFn = (record: any) => async () => {
		openDrawer(true, {
			reload,
			record
		});
	};

	return (
		<div>
			<div className="page-content">
				<BasicTable register={registerTable}></BasicTable>
			</div>
			<CreateAndUpdata register={registerDrawer}></CreateAndUpdata>
		</div>
	);
};

export default index;
